import React from 'react'
export default class Tap extends React.Component{
    constructor() {
        super()
    }
    componentDidMount () {
    }
    sendAction = (areaType, screenIndex, mediaType) => {
    	  // 获取media url
	      let mediaURL = this.props.data[screenIndex][mediaType]
        this.props.sendAction(areaType, screenIndex, mediaType, mediaURL)
    }
    num = (type) => {
      if (type === undefined) return
      return type.replace('split-', '')
    }
    render() {
        let {type} =this.props
        let buttons = []
        for (var i=0; i<this.num(type); i++ ){
             buttons.push(
             	// 一个group代表一个屏幕，i代表了屏幕的索引
             	<div className='buttons-group   bounceIn animated' key={Math.random()}>
	              <button  className="hvr-float-shadow   button-primary button-rounded" key={Math.random()} onClick={this.sendAction.bind(this, type, i,'video')}><i className="fa fa-video-camera" aria-hidden="true"></i>视频</button>
	              <button className="hvr-float-shadow button-primary button-rounded " key={Math.random()} onClick={this.sendAction.bind(this, type, i,'website')}><i className="fa fa-globe" aria-hidden="true"></i>
                  网页</button>
	              <button className="hvr-float-shadow  button-primary button-rounded " key={Math.random()} onClick={this.sendAction.bind(this, type, i,'image')}><i className="fa fa-file-image-o" aria-hidden="true"></i>
                  图片</button>
              </div>
             )
          }
        return <div className="touchArea">
            {/* <div className="dig button button-raised button-caution button-circle button-jumbo">{this.num(type)} </div> */}
          {buttons}
        </div>
    }
}